<template>
  <div v-if="fullscreenLoading" :style="{'background-color': '#EBEEF5', 'min-height': screenHeight + 'px'}">
    <div :style="{'width': '1200px', 'margin': '0 auto', 'display': 'flex', 'min-height': screenHeight + 'px'}">
      <template v-if="res === 1">
        <div v-for="(item) in list" :key="item.index" class="con-line">
          <div class="con-card">
            <div style="padding: 0 30px 0 30px;">
              <i class="el-icon-monitor" style=" font-size: 74px; color: #FFFFFF" />
            </div>
            <div style="color: #FFFFFF; font-size: 20px;">{{ item.creatorYear }}年度<br>数智生态诊断</div>
          </div>
          <template v-if="item.id === '1'">
            <div class="con-btn">
              <el-tag type="success">已填报</el-tag>
              <div>
                <el-button type="primary" @click="toReview">查看填报信息</el-button>
                <el-button type="warning" @click="baseFind">重新填报</el-button>
              </div>
            </div>
          </template>
          <template v-if="item.id === '0'">
            <div class="con-btn">
              <el-tag type="success">已填报</el-tag>
              <div>
                <el-button type="primary" @click="toHistory(item.creatorKey)">查看填报结果</el-button>
              </div>
            </div>
          </template>
        </div>
      </template>
      <template v-if="res === 0">
        <div class="con-line">
          <div class="con-card">
            <div style="padding: 0 30px 0 30px;">
              <i class="el-icon-monitor" style=" font-size: 74px; color: #FFFFFF" />
            </div>
            <div style="color: #FFFFFF; font-size: 20px;">{{ year }}<br>数智生态诊断</div>
          </div>
          <div class="con-btn">
            <el-tag type="warning">待填报</el-tag>
            <div>
              <el-button type="primary" @click="baseFind">去填报</el-button>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { list } from '@/api/diagnosis'
import { find2 } from '@/api/base'
export default {
  data() {
    return {
      fullscreenLoading: false,
      screenHeight: 500,
      list: [],
      res: 0,
      year: ''
    }
  },
  created() {
    this.screenHeight = screen.height - 350
    this.find()
  },
  methods: {
    find() {
      list().then(response => {
        if (response.result === 1) {
          this.res = 1
          this.list = response.data
        } else if (response.result === 2) {
          this.res = 0
          this.year = response.msg + '年度'
        }
        this.fullscreenLoading = true
      }).catch(() => {
        this.fullscreenLoading = true
      })
    },
    baseFind() {
      find2().then(response => {
        if (response.result === 1) {
          this.$router.push('/diagnosis/promise')
        } else if (response.result === 2) {
          this.$message({
            message: '请完善企业基本信息', type: 'warning'
          })
          return false
        } else {
          return false
        }
      })
    },
    toReview() {
      this.$router.push('/diagnosis/review')
    },
    toHistory(creatorKey) {
      this.$router.push({ name: 'DiagnosisHistory', query: { creatorKey: creatorKey }})
    }
  }
}
</script>
<style>
.con-line {
  width: 350px;
  height: 340px;
  border: 0 solid;
  border-radius: 10px;
  padding: 100px 30px 0 0;
}
.con-line2 {
  width: 350px;
  height: 340px;
  border: 0 solid;
  border-radius: 10px;
  padding: 20px 30px 0 0;
}
.con-card {
  width: 100%;
  height: 160px;
  background-color: #409EFF;
  display: flex;
  align-items: center;
}
.con-btn {
  background-color:#FFFFFF;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}
.con-btn1 {
  background-color:#FFFFFF;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-direction: column;
  justify-content: space-around;
}
.suspend-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 76px;
  border-radius: 2px;
  background-color: #fff;
  padding: 0 0 20px 0;
}
.icon-name {
  margin-top: 4px;
  line-height: 18px;
  font-size: 12px;
  color: #666;
}
</style>
